<template>
	<wrapPopup v-if="isShow" @click="onDismiss" mode="bottom">
		<view class="wrap-comment-popup safe-area" @click.stop.prevent>
			<textarea
				class="textarea f-28"
				:placeholder="commentInfo.place"
				placeholder-class="place"
				v-model="content"
				:adjust-position="false"
				:focus="isFocus"
				@keyboardheightchange="onKeyboardChange"
			/>

			<view class="wrap-bottom-bg flex align-center just-between">
				<view class="photo-bg flex align-center">
					<image
						class="img"
						v-if="images !== ''"
						:src="$getImageURL(images)"
						@click.stop="$filters.onPreviewImage([images], 0)"
					/>

					<image class="img" :src="$staticImagePath('article/comment_camera.png')" @click="onChooseImage" />
				</view>

				<view class="send-btn f-30" @click.stop="onSend">发表</view>
			</view>
			
			<view class="wrap-zw" :style="'height:' + keyboardHeight + 'px;'"></view>
		</view>
	</wrapPopup>
</template>

<script>
	import {SendComment} from "@/API/article.js";
	import wrapPopup from "@/components/popup/popup.vue";
	export default {
		components: {
			wrapPopup,
		},
		props: {
			/**
			 * 文章ID
			 */
			articleID: {
				type: String,
				default: "",
			},
			/**
			 * 是否显示
			 */
			isShow: {
				type: Boolean,
				default: false,
			},
			/**
			 * 评论的信息
			 */
			commentInfo: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				isFocus: false, //是否聚焦
				content: "", //评论内容
				images: "", //图片
				keyboardHeight: 0, //键盘的高度
			};
		},
		watch: {
			isShow: {
				handler() {
					if (this.isShow) {
						setTimeout(() => {
							this.isFocus = true;
						}, 300);
					}
				},
				immediate: true,
			},
		},
		methods: {
			/**
			 * 键盘发生变化
			 */
			onKeyboardChange(e) {
				this.keyboardHeight = e.detail.height;
			},
			/**
			 * 销毁
			 */
			onDismiss() {
				this.$emit("update:isShow", false);
			},
			/**
			 * 选择图片
			 */
			onChooseImage() {
				this.$filters.onChooseImage(1, list => {
					this.onUploadImage(list[0]);
				})
			},
			/**
			 * 上传图片
			 */
			onUploadImage(file) {
				this.$commonNetwork.onUploadFile(file, res => {
					this.images = res.url;
				})
			},
			/**
			 * 发表
			 */
			onSend() {
				if (this.content === "") {
					this.$st.show(`请输入`);
					return;
				}
				SendComment({
					article_id: this.articleID,
					content: this.content,
					pid: this.commentInfo.pid,
					to_id: this.commentInfo.toID,
					images: this.images,
				}).then(res => {
					this.$st.success("评论成功", () => {
						this.onDismiss();
					})
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-comment-popup {
		width: 750rpx;
		background-color: #f6f6f6;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		padding: 25rpx;
		box-sizing: border-box;

		.textarea {
			width: 100%;
			height: 240rpx;
			background-color: white;
			border-radius: 16rpx;
			overflow: hidden;
			padding: 25rpx;
			box-sizing: border-box;
			color: #252525;
		}
		/deep/ .place {
			color: #666666;
		}

		.wrap-bottom-bg {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
			gap: 30rpx;

			.photo-bg {
				flex: 1;
				gap: 40rpx;
				overflow: hidden;

				.img {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.send-btn {
				width: 160rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				border-radius: 35rpx;
				overflow: hidden;
				background: linear-gradient(to right, #f49355, #dd551b);
				color: white;
			}
		}
		
		.wrap-zw {
			width: 100%;
			overflow: hidden;
		}
	}
</style>
